<template>
  <el-avatar 
    :size="size" 
    :src="avatarUrl" 
    class="user-avatar"
  >
    <template #default>
      <span class="avatar-text">{{ userInitial }}</span>
    </template>
  </el-avatar>
</template>

<script setup>
import { computed, defineProps } from 'vue'

const props = defineProps({
  user: {
    type: Object,
    default: () => ({})
  },
  size: {
    type: Number,
    default: 40
  }
})

// 计算属性
const avatarUrl = computed(() => {
  return props.user?.avatar || ''
})

const userInitial = computed(() => {
  if (props.user?.username) {
    return props.user.username.charAt(0).toUpperCase()
  }
  return 'U'
})
</script>

<style scoped>
.user-avatar {
  border: 2px solid rgba(102, 126, 234, 0.2);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar:hover {
  border-color: rgba(102, 126, 234, 0.5);
  transform: scale(1.05);
}

.avatar-text {
  font-weight: 600;
  font-size: 12px;
  color: #667eea;
}
</style>